<%@ page contentType="text/html; charset=UTF-8anguage="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset=UTF-8meta name=viewport" content="width=device-width, initial-scale=10
    <title>公告管理 - 应急防护小站</title>
    <link href=https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel=stylesheet>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667a 0%, #764ba2100);

        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 010px 25(0,00.1);
        }
    </style>
</head>
<body class="bg-gray-50
    <!-- 导航栏 -->
    <nav class="gradient-bg text-white shadow-lg">
        <div class=container mx-auto px-6 py-4>
            <div class=flex items-center justify-between>
                <div class=flexitems-center space-x-3">
                    <i class=fasfa-shield-alt text-2xl"></i>
                    <h1 class=text-xl font-bold">应急防护小站</h1>
                    <span class="text-sm opacity-75">公告管理</span>
                </div>
                <div class=flexitems-center space-x-4">
                    <a href="admin-dashboard.jsp" class="hover:text-blue-200 transition-colors">
                        <i class=fas fa-arrow-left mr-2"></i>返回管理中心
                    </a>
                    <a href="logout" class="hover:text-red-200 transition-colors">
                        <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class=container mx-auto px-6 py-8
        <!-- 页面标题 -->
        <div class=mb-8>       <h2ss="text-3ont-bold text-gray-800">公告管理</h2>
            <p class=text-gray-600网站公告信息</p>
        </div>

        <!-- 操作按钮 -->
        <div class=mb-6 flex justify-between items-center">
            <div class=flex space-x-4>
                <button onclick=window.location.href='admin-announcement-edit.jsp'" 
                        class=px-42lue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                    <i class="fas fa-plus mr-2"></i>发布新公告
                </button>
                <button onclick=exportAnnouncements()" 
                        class=px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors">
                    <i class="fas fa-download mr-2"></i>导出公告
                </button>
            </div>
            <div class=flex space-x-2
                <select id="statusFilter" onchange=filterAnnouncements()" 
                        class=px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                    <option value="">全部状态</option>
                    <option value="active">已发布</option>
                    <option value=draft">草稿</option>
                    <option value="archived">已归档</option>
                </select>
            </div>
        </div>

        <!-- 公告列表 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class=overflow-x-auto>
                <table class=min-w-full divide-y divide-gray-200">
                    <thead class=bg-gray-50">
                        <tr>
                            <th class=px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                            <th class=px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                            <th class=px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class=px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                            <th class=px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class=bg-white divide-y divide-gray-200">
                        <tr class=hover:bg-gray-50">
                            <td class=px-6y-4 whitespace-nowrap">
                                <div class=flex items-center">
                                    <div class=flex-shrink-0 h-10 w-10">
                                        <i class=fas fa-bullhorn text-blue-500                   </div>
                                    <div class=ml-4">
                                        <div class=text-sm font-medium text-gray-900                   <div class=text-sm text-gray-50>系统将于今晚进行维护升级</div>
                                    </div>
                                </div>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap">
                                <span class=px-2nline-flex text-xs leading-5 font-semibold rounded-full bg-blue-10 text-blue-800">通知</span>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap">
                                <span class=px-2nline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已发布</span>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap text-sm text-gray-50>2024-1                   <td class=px-6y-4 whitespace-nowrap text-sm font-medium">
                                <a href=admin-announcement-edit.jsp?id=1lass=text-blue-600over:text-blue-900">编辑</a>
                                <a href=javascript:void(0 onclick=deleteAnnouncement(1)" class=text-red-60hover:text-red-900">删除</a>
                            </td>
                        </tr>
                        <tr class=hover:bg-gray-50">
                            <td class=px-6y-4 whitespace-nowrap">
                                <div class=flex items-center">
                                    <div class=flex-shrink-0 h-10 w-10">
                                        <i class=fas fa-exclamation-triangle text-yellow-500                   </div>
                                    <div class=ml-4">
                                        <div class=text-sm font-medium text-gray-900">安全提醒</div>
                                        <div class=text-sm text-gray-50                   </div>
                                </div>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap">
                                <span class=px-2nline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-10 text-yellow-800">警告</span>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap">
                                <span class=px-2nline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已发布</span>
                            </td>
                            <td class=px-6y-4 whitespace-nowrap text-sm text-gray-50>2024-1                   <td class=px-6y-4 whitespace-nowrap text-sm font-medium">
                                <a href=admin-announcement-edit.jsp?id=2lass=text-blue-600over:text-blue-900">编辑</a>
                                <a href=javascript:void(0 onclick=deleteAnnouncement(2)" class=text-red-60hover:text-red-900">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页 -->
        <div class=mt-6 flex items-center justify-between">
            <div class=flex-1 flex justify-between sm:hidden>
                <a href=javascript:void(0ss=relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-70 bg-white hover:bg-gray-50">上一页</a>
                <a href=javascript:void(0) class=ml-3lative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-70 bg-white hover:bg-gray-50">下一页</a>
            </div>
            <div class=hidden sm:flex-1ex sm:items-center sm:justify-between>
                <div>
                    <p class=text-sm text-gray-700示 <span class=font-medium>1</span> 到 <span class=font-medium">2n> 条，共 <span class=font-medium">2</span> 条结果</p>
                </div>
                <div>
                    <nav class=relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label=Pagination">
                        <a href=javascript:void(0ss=relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300white text-sm font-medium text-gray-50hover:bg-gray-50">上一页</a>
                        <a href=javascript:void(0ss=relative inline-flex items-center px-4 py-2 border border-gray-300white text-sm font-medium text-gray-70hover:bg-gray-50">1</a>
                        <a href=javascript:void(0ss=relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300white text-sm font-medium text-gray-50hover:bg-gray-50">下一页</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script>
        function filterAnnouncements() {
            const status = document.getElementById('statusFilter').value;
            // 实现筛选逻辑
            console.log(筛选状态:, status);
        }
        
        function deleteAnnouncement(id) [object Object]       if (confirm("确定要删除这条公告吗？")) {}                // 实现删除逻辑
                console.log("删除公告ID:", id);
            }
        }
        
        function exportAnnouncements()[object Object]
            // 实现导出逻辑
            console.log("导出公告");
        }
    </script>
</body>
</html> 